<!-- 登录 -->
<template>
  <div class="login_page">
    <Nav></Nav>
    <div class="login">
      <div class="logins">
        <div class="logins_list">
          <li>
            <p>绑定手机号</p>
            <p><input type="text" v-model="tel"></p>
          </li>
          <li>
            <p>验证码</p>
            <span>
              <p><input type="text" v-model="cat"></p>
              <p><img class="cap" src="" alt="" @click="captCha()"></p>
            </span>
          </li>
          <li>
            <p>短信验证码</p>
            <span>
              <p><input type="text" v-model="code"></p>
              <p><input type="button" @click="sendSm()" :class="disabled ? '' : 'active'" :value="btnText"></p>
            </span>
          </li>
          <li><input type="button" value="立即绑定" @click="bMob()"></li>
          <li><span>登录即表示您已阅读并同意</span><router-link tag="span" to="/agreement">《岸上教育协议》</router-link></li>
        </div>
      </div>
      <!-- <div class="mogu1">
        <img src="https://common-image-1258943427.cos.ap-beijing.myqcloud.com/ansjy_pc/img/mogu1.png" alt="">
      </div>
      <div class="mogu2">
        <img src="https://common-image-1258943427.cos.ap-beijing.myqcloud.com/ansjy_pc/img/mogu2.png" alt="">
      </div> -->
    </div>
  </div>
</template>

<script>
import Nav from '../components/Nav/nav'
export default {
  data () {
    return {
      loginList: [],
      captList: [],
      tel: '',
      cat: '',
      code: '',
      btnText: '获取验证码',
      time: 0,
      disabled: true
    }
  },
  head () {
    return {
      script: [
        { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
      ]
    }
  },

  created () {
  },

  mounted () {
    var href = window.location.href
    // /login/?code=dasdkjashdk1233123k213213hk2131k23h2k&state=STATE
    var href1 = href.split('=')
    var code = href1[1].split('&')
    this.$http.post('/login/wechatLogin', {
      code: code[0]
    }).then((res) => {
      this.loginList = res.data.data
      localStorage.setItem('token', this.loginList.token)
      if (!this.loginList.is_turn_mobile) {
        window.location.href = localStorage.getItem('href')
        localStorage.setItem('token', this.loginList.token)
        localStorage.setItem('user', this.loginList.user_info.nickname)

      }
    })
    this.captCha()
  },

  components: {
    Nav
  },

  computed: {
    a () {
      return this.captList
    }
  },

  methods: {
    // 时间
    getTime () {
      if (this.time > 0) {
        this.time--
        this.btnText = '已发送(' + this.time + 's)'
        setTimeout(this.getTime, 1000)
      } else {
        this.time = 0
        this.btnText = '重新发送'
        this.disabled = true
      }
    },
    // 图片验证码
    captCha () {
      this.$http.post('/login/getCaptchaImg').then((res) => {
        this.captList = res.config.url
        // 重新赋值，切换图片
        $('.cap').attr('src', this.captList)
      })
    },
    // 获取短信验证码
    sendSm () {
      if (this.disabled) {
        this.time = 60
        this.getTime()
        this.$http.post('/login/sendSms', {
          mobile: this.tel,
          captcha: this.cat
        }).then((res) => {
        })
        this.disabled = false
      } else {
        this.disabled = false
      }
    },
    // 绑定手机号
    bMob () {
      var token = localStorage.getItem('token')
      this.$http.post('/user/bindMobile', {
        mobile: this.tel,
        code: this.code,
        token: token
      }).then((res) => {
        if (res.data.code === 1) {
          this.$message({
            message: '手机绑定成功',
            type: 'success'
          })
          localStorage.setItem('user', this.loginList.user_info.nickname)
          window.location.href = localStorage.getItem('href')
        } else if (res.data.code === 0) {
          this.$message({
            message: res.data.msg,
            type: 'warning'
          })
        }
      })
    }
  }
}

</script>
<style lang='scss' scoped>
.login_page{
  width: 100%;
  height: 100vh;
  background:rgba(244,248,251,1);
  overflow: hidden;
}
.login{
  width: 100%;
  height: calc(100vh - 62px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.logins{
  width:520px;
  height:540px;
  background:rgba(255,255,255,1);
  box-shadow:0px 4px 40px 0px rgba(0,0,0,0.05);
  border-radius:12px;
}
.logins_list{
  width: 354px;
  height: auto;
  margin: 87px auto 0px;
}
.logins_list li{
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.logins_list li span{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.logins_list li span p img{
  width: 100%;
}
.logins_list li span input[type='text']{
  width: 219px;
}
.logins_list li span p:first-child{
  margin-bottom: 0px;
}
.logins_list li span input[type='button']{
  width: 123px;
}
.logins_list li p:first-child{
  margin-bottom: 8px;
}
.logins_list li input[type='text']{
  width:354px;
  height:40px;
  background:rgba(250,250,250,1);
  border-radius:4px;
  border:1px solid rgba(240,240,240,1);
  text-indent: 10px;
}
.logins_list li input[type='button']{
  height:40px;
  background:rgba(24,144,255,1);
  border-radius:4px;
  color: #ffffff;
  border: none;
}
.logins_list li input[type='button'].active{
  background:rgba(204,204,204,1);
  color: rgba(34, 34, 34, 1);
}
.logins_list li:nth-child(4){
  margin-top: 50px;
}
.logins_list li:last-child{
  display: flex;
  flex-direction: row;
  align-items: center;
  color:rgba(204,204,204,1);
}
.logins_list li:last-child span:last-child{
  cursor: pointer;
}
.mogu1{
  position: absolute;
  z-index: 9;
  left: 200px;
  bottom: 0px;
  width: 677px;
  height: 681px;
}
.mogu1 img{
  width: 100%;
  height: 100%;
}
.mogu2{
  position: absolute;
  z-index: 9;
  right: 0px;
  bottom: 0px;
}
</style>
